import React, { Component, Fragment } from "react";
import Action from "@c/buttonAction/Index";
import TableComponent from "@c/tableData/Index";
import { Payment_Status, Order_Type } from "../../constants";
import { Tooltip, Button, Tabs } from "antd";
import { DownloadOutlined } from '@ant-design/icons';
// components
import ExportDrawer from './components/exportDrawer';
import BalanceTable from "./components/balanceTable";
import "./index.scss";

const { TabPane } = Tabs;

class AliyunBilling extends Component {
    constructor(props){
        super(props);
        this.state = {
            // id
            id: "",
            // flag
            flag: false,
            // 请求参数
            PageNumber: 1,
            PageSize: 20,
            keyWork: "",
            // 表头
            tableConfig: {
                url: "billingList",
                method: "get",
                rowkey: "order_id",
                checkbox: true,
                thead: [
                    { title: "订单号", dataIndex: "order_id", key: "order_id" },
                    { title: "产品", dataIndex: "product_code", key: "product_code" },
                    { 
                        title: "类型", dataIndex: "order_type", key: "order_type",
                        render: (order_type => {
                            return <span>{Order_Type[order_type]}</span>
                        })
                    },
                    { 
                        title: "实例", dataIndex: "ins_ids", key: "ins_ids",
                        ellipsis: true,
                        render: (ins_ids => {
                            return (
                                <div>
                                    {ins_ids ? ins_ids.map(ins_id => (<div><span>{ins_id}</span><br/></div>)) : ''}
                                </div>
                            )
                        })
                    },
                    { title: "创建时间(UTC+8)", dataIndex: "create_time", key: "create_time" },
                    { title: "支付/开通时间(UTC+8)", dataIndex: "payment_time", key: "payment_time" },
                    { 
                        title: "状态", dataIndex: "payment_status", key: "payment_status",
                        render: (ins_ids => {
                            let font_color = ins_ids === 'Paid' ? 'rgb(53, 179, 74)' : ''
                            return <span style={{color: font_color}}>{Payment_Status[ins_ids]}</span>
                        })
                    },
                    { 
                        title: "官网价", dataIndex: "pretax_gross_amount", key: "pretax_gross_amount",
                        render: (pretax_gross_amount => {
                            return `¥ ${pretax_gross_amount}`
                        })
                    },
                    { 
                        title: "应付金额", dataIndex: "pretax_amount", key: "pretax_amount",
                        render: (pretax_amount => {
                            return `¥ ${pretax_amount}`
                        })
                    },
                    { 
                        title: "操作", 
                        dataIndex: "operation", 
                        key: "operation", 
                        width: 50,
                        render: (text, rowData) => {
                            return (
                                <div className="inline-button">
                                    <Action>
                                        <Action.Button onClick={() => console.log({status: true, postcode_id: rowData.id})}>详情</Action.Button>
                                    </Action>
                                </div>
                            )
                        }
                    }
                ],
                formItem: [
                    { 
                        type: "SelectComponent",
                        label: "账号", 
                        url: "accountList",
                        method: "get",
                        name: "account_uid",
                        defaultValue: "光云raycloud",
                        propsKey: {
                            label: "name",
                            value: "uid"
                        },
                        style: { width: "150px" },
                        placeholder: "请选择"
                    },
                    { 
                        type: "Input",
                        label: "产品", 
                        name: "product_code", 
                        style: { width: "100px" },
                        placeholder: "请输入产品code"
                    },
                    { 
                        type: "Select",
                        label: "类型", 
                        name: "order_type", 
                        style: { width: "80px" },
                        optionsKey: "order_type"
                    },
                    { 
                        type: "Select",
                        label: "状态", 
                        name: "payment_status", 
                        style: { width: "80px" },
                        optionsKey: "payment_status"
                    },
                    { 
                        type: "Input",
                        label: "订单号", 
                        name: "order_id", 
                        style: { width: "160px" },
                        placeholder: "请输入订单号"
                    },
                    { 
                        type: "DatePicker",
                        label: "时间范围", 
                        name: "time_range"
                    },
                ],
                formSearchCol: 22,
                formRightCol: 2,
            },
            // 表的数据
            data: []
        };
    }

    componentDidMount(){}
    // 获取子组件实例
    getChildRef = (ref) => {
        this.tableComponent = ref; // 存储子组件
    }
    // 获取弹窗子组件实例
    getExportDrawerRef = (ref) => { this.child = ref }
    // 显示弹窗
    exportDrawer = (data) => {
        console.log(data)
        this.child.showDrawer(data);
    }
    
    render(){
        return (
            <Fragment>
                <Tabs defaultActiveKey='capital'>
                    <TabPane tab="资金管理" key='capital'>
                        <BalanceTable />
                    </TabPane>
                    <TabPane tab="订单管理" key='order'>
                        {/* 搜索栏 */}
                        {/* <BssSearchDiv>
                        </BssSearchDiv> */}
                        <TableComponent onRef={this.getChildRef} batchButton={false} config={this.state.tableConfig} >
                            <Tooltip title="导出excel">
                                <Button 
                                    type="primary" 
                                    shape="circle" 
                                    className="btn" 
                                    icon={<DownloadOutlined />} 
                                    onClick={() => this.exportDrawer({ status: true })}>
                                </Button>
                            </Tooltip>
                        </TableComponent>
                        <ExportDrawer onRef={this.getExportDrawerRef}/>
                    </TabPane>
                </Tabs>
            </Fragment>
        )
    }
}

export default AliyunBilling;